<template>
    <div id="shop">
        <h2 class="h2">购物车</h2>
        <div class="icon">
            <van-icon name="shopping-cart-o" size="2rem" color="#ccc" class="icon-shop"/>
            <p class="icon-name">您的购物车没有商品</p>
            <button class="icon-btn">去购物</button>
        </div>
        <p class="like">猜你喜欢</p>
        <ul class="list">
            <li v-for="(item,index) in list" :key="index">
                <img :src="item.image" alt="">
                <p class="list-name">{{item.name}}</p>
                <p class="price">
                    <span class="new">{{item.new}}</span>
                    <span class="old">{{item.old}}</span>
                    <span class="type">{{item.text}}</span>
                </p>
                <p class="check">
                    <span class="tejia">{{item.tejia}}</span>
                    <span class="jifen">{{item.jifen}}</span>
                </p>
                <p class="raiod">
                    <span class="pingjia">{{item.pingjia}}</span>
                    <span class="haoping">{{item.haoping}}</span>
                </p>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:"Shop",
    data(){
        return {
            list:null
        }
    },
    created(){
        this.a1();
    },
    methods:{
        async a1(){
            let {data} = await axios.get("./shop.json");
            console.log(data)
            this.list = data.shop;
        }
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
#shop{
    width: 7.5rem;
    background: rgb(240, 240, 240);
}
.h2{
    padding: .2rem 0 0 .4rem;
}
.icon{
    width: 100%;
}
.icon>.icon-shop{
    padding-left: 2.75rem;
    padding-top: .8rem;
}
.icon>.icon-name{
    text-align: center;
    padding-top: .4rem;
    color: #00000066;
    font-size: .28rem;
}
.icon>.icon-btn{
    width: 2.5rem;
    height: .8rem;
    background: #cf0a2c;
    color: #fff;
    border: none;
    border-radius: 1rem;
    margin-left: 2.5rem;
    margin-top: .4rem;
    line-height: .8rem;
}
.like{
    padding-left: .4rem;
    padding-top: 1rem;
}
.list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding-top: .4rem;
}
.list li{
    background: #fff;
    width: 46%;
    border-radius: .2rem;
    margin-bottom: .2rem;
}
.list li>img{
    width: 90%;
    padding:.6rem 0 .4rem .2rem;
}
.list li>.list-name{
    color: #000;
    font-size: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    opacity: 0.9;
    text-align: left;
    font-weight: 500;
    padding: 0 .2rem;
    line-height: .4rem
}
.list li>.price{
    padding-top: .2rem;
}
.list li .price .new{
    padding-left: .15rem;
    color: #CF0A2C;
    font-size: .32rem;
}
.list li .price .old{
    font-size: .2rem;
    color: rgba(0,0,0,0.6);
    padding-left: .15rem;
    font-weight: 400;
    text-decoration:line-through;
}
.list li .price .type{
    display: inline-block;
    text-align: center;
    width: .8rem;
    height: .3rem;
    line-height: .3rem;
    border: .01rem solid #46B1E3;
    color: #46B1E3;
    font-size: .16rem;
    margin-left: .2rem;
}
.list li .check{
    display: flex;
    margin-top: .2rem;
}
.list li .check>span{
    margin-left: .2rem;
    display: inline-block;
    width:1.2rem;
    height: .3rem;
    text-align: center;
    line-height: .3rem;
    font-size: .2rem;
    color: #E64566;
    border: .01rem solid #E64566;
    border-radius: .1rem;
}
.list li .raiod{
    display: flex;
    margin-top: .2rem;
    padding-bottom: .2rem;
}
.list li .raiod>span{
    color: #000000;
    opacity: 0.6;
    font-size: .2rem;
    margin-left: .2rem;
}
</style>